<template>
    <div class="group-detail">
        <div class="table-list">
            <div class="table-header">拼团详情</div>
            <div class="table-item">
                <p>开团时间：{{ orderInfo.openTime }}</p>
                <p>状态：{{ orderInfo.status === 1 ? '已开团' : '进行中' }}</p>
            </div>
            <div class="table-item">
                <p>拼中人员：{{ orderInfo.username || '暂无' }}</p>
                <p>订单号：{{ orderInfo.tradeNo || '暂无' }}</p>
            </div>
            <div class="table-item">
                <p>总发出红包：¥{{ parseFloat(orderInfo.deservedMoney) * orderInfo.alreadyGroupUserNumber }}</p>
                <p>利润：¥{{ (parseFloat(orderInfo.groupPrice) - parseFloat(orderInfo.costprice)) * ( 1 - parseFloat(orderInfo.profitRate) / 100) }}</p>
            </div>
            <div class="table-item">
                <p>参团人员：（真实人员{{ orderInfo.alreadyGroupUserNumber }}，机器人{{ orderInfo.groupRobotUserNumber }}）</p>
            </div>
            <div class="table-item" v-if="orderInfo.record">
                <p v-for="(item, index) in orderInfo.record">{{ (index + 1) + '、' + item.username }}<span v-if="item.isRobot === 1">(机器人)</span>{{ '  ' + item.createTime }}</p>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		name: 'GroupDetail',
        props: {
			value: {
				type: Object,
                default: () => {
                	return {}
                }
            }
        },
        data() {
			return {
				orderInfo: {}
            }
        },
        created() {
			this.$service.group.goodsCombination.info({
                id: this.value.id
            }).then(res => {
            	this.orderInfo = res;
            })
		}
	};
</script>

<style lang="stylus" scoped>
.group-detail {
    .table-list {
        border-radius: 4px;
        border: 1px solid #dddddd;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .table-header {
            background: #f5f5f5;
            padding: 2px 14px;
            font-weight: 600;
        }
        .table-item {
            padding: 2px 14px;
            border-bottom: 1px solid #f5f5f5;
            &:last-child {
                border-bottom: none;
            }
            flexBox(space-between, null, null, wrap);
            p {
                width: 50%;
            }
        }
    }
}
</style>